Ext.onReady (function(){
	var data=[
		['1','male','name1'],
		['2','female','name2'],
		['3','male','name3'],
		['4','females','name4']
	];
	
	var template = new Ext.Template(
		'<tr>',
			'<td>{0}</td>',
			'<td>{1}</td>',
			'<td>{2}</td>',
		'</tr>'
	);
	for(var i=0;i<data.length;i++){
		template.append('table',data[i]);
	}
	
	var xTemplate = new Ext.XTemplate(
		'<tpl for=".">',
			'<tr>',
				'<tpl for=".">',
					'<td>{[values]}</td>',
				'</tpl>',
			'</tr>',
		'</tpl>'
	);
	
	
	xTemplate.append('table1',data);	
	
	 var store = new Ext.data.JsonStore({
        url: '../hf/treeMenu.do?action=getImages',
        baseParams :{imageDir :'/images/menu/2/icon/'},
        root: 'images',
        fields: ['name', 'url']
    });
    store.load();
    
    
     var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);
    
    var panel = new Ext.Panel({
        cls:'images-view',
        frame:true,
        width:535,
        autoHeight:true,
        collapsible:true,
        maskDisabled :true,
        layout:'fit',
        title:'图片选择窗',

        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
			
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                return data;
            },
            
            listeners: {
            	click :{
            		fn: function(dv,index,node){
            			var data=dv.getRecord(node);
            			panel.setTitle('图片选择窗(您选择了'+data.data.name+')');
            		}
            	},
            	dblclick : {
            		fn: function(dv,index,node){
            			
            		}
            	}
            }
        })
    });
   panel.render(document.body);
	
});